<template>
  <div>
    <Drawer
      :closable="false"
      :mask-closable="true"
      @on-visible-change="
        (e) => {
          !e && $emit('closePreModal', false);
        }
      "
      :width="600"
      v-model="showPre"
    >
      <h3>客户详细</h3>
      <Row class="ivu-mt-16 info">
        <Col :span="18">
          <b class="name">{{ clientInfo.name }}</b>
          <Tag color="success" v-if="clientInfo.type_str">{{
            clientInfo.type_str
          }}</Tag>
          <Tag type="border" color="default" v-if="clientInfo.discount_rate"
            >{{
              clientInfo.discount_rate == 100
                ? "全"
                : clientInfo.discount_rate / 10
            }}折</Tag
          >
        </Col>
        <Col :span="6">
          <span>{{ clientInfo.created_at_str }}</span>
        </Col>
        <Col :span="24" v-if="clientInfo.remark">
          备注：<span>{{ clientInfo.remark }}</span>
        </Col>
        <Col :span="4">
          到店：<span>{{ clientInfo.arrive_num }} 次</span>
        </Col>
        <Col :span="4">
          消费：<span>{{ clientInfo.consume_money }}</span>
        </Col>
      </Row>
      <Divider />
      <div class="ivu-mb-16 title"><b>预约/消费记录</b></div>
      <div style="height: calc(100vh - 260px); overflow-y: auto">
        <Timeline>
          <TimelineItem v-for="item in clientInfo.record_list" :key="item.id">
            <template v-if="item.type == 1">
              <p class="time">{{ item.created_at_str }}</p>
              <p class="content">
                收费项目：<span>{{ item.treatment_project.join("，") }}</span>
              </p>
              <p class="content">
                支付金额：<span>{{ item.actual_price }}</span>
              </p>
              <p class="content">
                <span><Icon type="md-pin" />{{ item.shop_name }}</span>
                <span><Icon type="md-medkit" />{{ item.doctor_name }}</span>
                <span
                  ><Icon type="ios-ionitron" />{{ item.consultant_name }}</span
                >
              </p>
            </template>
            <template v-else>
              <p class="time">{{ item.created_at_str }}</p>
              <p class="content">
                <b
                  >预约【{{ item.shop_name }}】【{{
                    item.treatment_project
                  }}】</b
                >
              </p>
              <p class="content" v-if="item.remark">
                备注:<span>{{ item.remark }}</span>
              </p>
            </template>
          </TimelineItem>
        </Timeline>
        <div
          v-if="!clientInfo.record_list || clientInfo.record_list.length < 1"
          class="ivu-text-center"
          style="padding-top: 50px; color: #999"
        >
          暂无数据
        </div>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { patientDetail } from "@api/client.js";
export default {
  props: ["showPre", "contentId"],
  data() {
    return {
      clientInfo: {},
    };
  },
  watch: {
    showPre() {
      if (this.showPre) {
        patientDetail({ id: this.contentId }).then((res) => {
          this.clientInfo = res;
        });
      }
    },
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.content {
  line-height: 32px;
  font-size: 16px;
}
.title {
  font-size: 16px;
}
.info {
  font-size: 16px;
  line-height: 32px;
}
.content span {
  margin-right: 10px;
}
.name {
  margin-right: 10px;
}
</style>
